import React, { Component } from 'react'
import { Tabs, Badge } from 'antd-mobile';
import "./NewProTabBar.scss"
import axios from "axios"
import { withRouter } from "react-router-dom"

// 引入图片
import userImg from "../../../assets/images/uer.jpg"

const tabs = [
    { title: <Badge >最近上架</Badge> },
    { title: <Badge >人气精选</Badge> },
    { title: <Badge >分类</Badge> },
];
class NewProTabBar extends Component {
  constructor() {
    super()
    this.state = {
        newProduct: []
    }
  }

  // 异步请求
  componentDidMount() {
    // 套装
    axios.get("./json/NewProduct.json").then((res) => {
      let newProduct_str = res.data;
      let newProduct = newProduct_str.data.list;
      
      this.setState({ newProduct });
      console.log(this.state.newProduct);
      
    });
  }

  // 跳转商品详情页面
  goToNewDetail=(id)=>{
    this.props.history.push('/details/'+ "1msvj44")
  }

  render() {
    return (
      <div className="newProTabBar">
        <Tabs
          tabs={tabs}
          initialPage={0}
          className="tabs-index"
          tabBarActiveTextColor="red"
          onTabClick={this.mainonclick}
        >
          {/*最近上架*/}
          <div className="tabs-list border1">
            {this.state.newProduct.map((v, i) => {
              return (
                <div className="newProduct-flex-box">
                  {this.state.newProduct.map((v, i) => {
                    return (
                      <div
                        className="newProduct-item"
                        key={v.rushId}
                        onClick={this.goToNewDetail.bind(this, i)}
                      >
                        <div className="top">
                          <div className="itemImage">
                            <img src={v.image} alt="" />
                          </div>
                          <div className="item-right">
                            <div className="right-top">
                              <p className="item-title">{v.title}</p>
                              <span className="description">
                                {v.promotionDesc}
                              </span>
                            </div>
                            <div className="remaining">
                              <div className="progress-bar">
                                <div
                                  className="progress-percent"
                                  style={{ width: (90 * v.sales) / v.total }}
                                >
                                  {/* {v.sales} */}
                                </div>
                              </div>
                              <span>
                                仅剩<em className="remain">{v.left}</em>件
                              </span>
                            </div>
                            <div className="bottom-text">
                              <div className="text">新品</div>
                            </div>
                            <div className="bottom-content">
                              <div className="salePrice">￥{v.salePrice}</div>
                              <div className="price">￥{v.price}</div>
                              <div className="buy">
                                <p className="toBuy">立即购买</p>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div className="foot">
                          <div className="user">
                            <div className="userImg">
                              <img src={userImg} alt="" />
                            </div>
                            <p>买家评价</p>
                          </div>
                          <div className="comment">{v.comment}</div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              );
            })}
          </div>
        </Tabs>
      </div>
    );
  }
}
export default withRouter(NewProTabBar)